<template>
  <header>
    <div class="logo-wrap">
      <MegmeetIcon style="width: 85% !important; height: 24px !important; cursor: pointer"
                   @click="handleSelect('/index')"></MegmeetIcon>
    </div>
    <div class="flex-grow"></div>
    <el-menu
        :default-active="props.activeTab"
        class="el-menu-demo"
        menu-trigger="hover"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
    >
      <el-menu-item index="/index" class="right-text">技术中心</el-menu-item>
      <el-menu-item index="/solutionTab" class="right-text">方案中心</el-menu-item>
      <el-sub-menu class="right-text" popper-class="show-popper" index="/onlineDemo">
        <template #title>演示中心</template>
        <template v-for="item in onlineDemo" :key="item.id">
          <el-menu-item :index="item.name" @click="jumpNewTap(item.showUrl)">
            <el-link class="setfont" target="_blank" :href="item.showUrl">{{ item.name }}</el-link>
          </el-menu-item>
        </template>
      </el-sub-menu>
      <el-menu-item index="/shareSpace" class="right-text">
        智联空间
      </el-menu-item>
      <el-sub-menu class="about-user" popper-class="user-popper" index="userInfo">
        <template #title>

          <el-avatar style="margin-left: 10px" :src="userInfo.userImg"></el-avatar>
          <div class="user-name">{{ userInfo.userName }}</div>
        </template>
        <el-menu-item class="user-info-el-menu-item" index="userCenter">
          <router-link class="no-underline" to="personalData">
            <el-icon>
              <Personal/>
            </el-icon>
            个人资料
          </router-link>
        </el-menu-item>
        <el-menu-item class="user-info-el-menu-item">
          <div class="no-underline" @click.stop="updateVisible=true">
            <el-icon>
              <Version/>
            </el-icon>
            版本管理
          </div>
        </el-menu-item>
        <el-menu-item class="user-info-el-menu-item" index="logout">
          <div class="no-underline" @click.stop="logout">
            <el-icon>
              <Logout/>
            </el-icon>
            退出登录
          </div>
        </el-menu-item>
        <el-menu-item class="user-info-el-menu-item">
          <el-switch size="large" :width="65"
                     inline-prompt
                     active-text="夜间"
                      inactive-text="白天"
                     style="--el-switch-on-color: #13ce66; --el-switch-off-color: #a89b9b"
                     v-model="isDark" @click.stop @change="toggleDark"></el-switch>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </header>
  <VersionUpdate :visible="updateVisible" v-if="updateVisible" @update="updateVisible=false"></VersionUpdate>
</template>
<script setup>
import {inject, reactive, ref} from 'vue'
import FrontApi from '@/api/front'
import Personal from "@/components/common/PersonalIcon"
import Logout from "@/components/common/LogoutIcon"
import MegmeetIcon from "@/components/common/Megmeet"
import useUserStore from "@/store/modules/user";
import router from '@/router'
import Version from "@/components/common/Version";
import VersionUpdate from "@/components/home/VersionUpdate";

const props = defineProps({
  activeTab: String
})

const emit = defineEmits(['selectItem'])

const toggleDark = inject("dark");
const isDark = inject("isDark");

const onlineDemo = ref([])
const codeUrl = ref([])
let updateVisible = ref(false)

let userInfo = reactive({
  userImg: '',
  userName: 'M000'
})

FrontApi.getOnlineDemoList().then(res => {
  onlineDemo.value = res.data
})
FrontApi.getSourceCodeList().then(res => {
  codeUrl.value = res.data
})
FrontApi.getPersonData().then(res => {
  userInfo.userImg = res.data.avatar;
  userInfo.userName = res.data.nickName;
})

const jumpNewTap = (url) => {
  window.open(url, '_blank')
}

const handleSelect = (key) => {
  key !== 'logout' && emit('selectItem', key)

}

const logout = () => {
  useUserStore().logout().then(() => {
    router.push('login')
  })
}
</script>

<style scoped>
header {
  z-index: 3;
  position: sticky;
  top: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  background: var(--el-bg-color);
}

.logo-wrap {
  display: flex;
  align-items: center;
  margin-left: 2.4rem;
}

.el-divider--vertical {
  height: 46.15%;
}

.flex-grow {
  flex-grow: 1;
}

.el-menu--horizontal {
  border-bottom: none;
  margin-right: 1.4rem;
}

.router-link-active {
  height: 40%;
}

.logo {
  vertical-align: middle;
  height: 100%;
}

.stock-code {
  height: 6rem;
  display: inline-flex;
  align-items: center;
  text-align: center;
  color: rgb(26, 155, 146);
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 2rem;
}

.right-text {
  font-weight: 600;
}

.about-user {
  width: 18rem;
}

.about-user :deep(.el-sub-menu__title) {
  padding: 0;
  justify-content: start;
}

.about-user:hover, .about-user .el-sub-menu__title:hover {
  background-color: var(--el-menu-item-hover) !important;
}

.user-name {
  margin-left: 1.5rem;
  font-size: 1.7rem;
}

.about-user i {
  display: none;
}

.user-info-el-menu-item {
  justify-content: center;
}

.no-underline {
  text-decoration: none;
  text-align: center;
  color: var(--el-menu-text-color);
  display: flex;
  align-items: center;
}

:deep(.el-avatar--circle) {
  border: 1px solid #c0c4cc;
}

.el-menu-demo :deep(.el-menu-item) {
  width: 13rem !important;
}

.about-user :deep(.el-sub-menu__icon-arrow) {
  position: initial;
  margin: 0 0 0 8px;
}
</style>
